<template>
	<view class="confirm">
		<u-navbar :title="$t('订单确认')"></u-navbar>
		<view class="card-view">
			<view class="card-view-0">
				<view class="card-view-0-left">
					<image :src="blind_box_info.image" mode=""></image>
					<view class="card-view-0-left-text">
						<text class="text-0">{{ blind_box_info.title }}</text>
						<text class="text-1">{{ blind_box_info.info }}</text>
					</view>
				</view>
				<view class="card-view-0-right">
					{{$t('¥')}}
					<text>{{ blind_box_info.price }}</text>
				</view>
			</view>
			<view class="card-view-1">
				<text class="card-view-1-left">{{$t('数量')}}</text>
				<text class="card-view-1-right">
					X
					<text>{{ num }}</text>
				</text>
			</view>
			<view class="card-view-1">
				<text class="card-view-1-left">{{$t('合计')}}</text>
				<text class="card-view-1-right">
					{{$t('¥')}}
					<text>{{ price }}</text>
				</text>
			</view>
		</view>

		<view class="payView">
			<view class="payView-title">{{$t('支付方式')}}</view>
			<view class="payView-cell" @click="changePay('wechat')">
				<view class="payView-cell-left">
					<u-icon name="weixin-circle-fill" color="#1aad19" size="36rpx"></u-icon>
					<text>{{$t('微信')}}</text>
				</view>
				<u-icon name="checkmark-circle-fill" color="#d99759" size="40rpx" v-if="paymode === 'wechat'"></u-icon>
				<u-icon name="checkmark-circle-fill" color="#f1f1f1" size="40rpx" v-else></u-icon>
			</view>
			<view class="payView-cell" @click="changePay('alipay')">
				<view class="payView-cell-left">
					<u-icon name="zhifubao-circle-fill" color="#69bcf8" size="36rpx"></u-icon>
					<text>{{$t('支付宝')}}</text>
				</view>
				<u-icon name="checkmark-circle-fill" color="#d99759" size="40rpx" v-if="paymode === 'alipay'"></u-icon>
				<u-icon name="checkmark-circle-fill" color="#f1f1f1" size="40rpx" v-else></u-icon>
			</view>
		</view>

		<view class="bottom-flexd-view-vh"></view>
		<view class="bottom-flexd-view">
			<view class="bottom-flexd-view-content">
				<view class="xieyi-Item" @click="xieyi = !xieyi">
					<u-icon name="checkmark-circle-fill" color="#d99759" size="24rpx" v-if="xieyi"></u-icon>
					<u-icon name="checkmark-circle-fill" color="#f1f1f1" size="24rpx" v-else></u-icon>
					<view class="xieyi-Item-1">
						{{$t('我已满18岁，已阅读并同意')}}
						<text @click.stop="$.to('/pages/my/agreement?type=pay_tipstips')">《{{$t('支付服务协议')}}》</text>
					</view>
				</view>

				<view class="payBtnView">
					<view class="payBtnView-0">
						<view class="payBtnView-0-0">
							{{$t('合计')}}：
							<text class="text-0">
								{{$t('¥')}}
								<text class="text-1">{{ price }}</text>
							</text>
						</view>
						<view class="payBtnView-0-1">{{$t('共')}}{{ num }}{{$t('件')}}</view>
					</view>
					<view class="payBtnView-1" @click="confrimBtn">{{$t('确认支付')}}</view>
				</view>
				<!-- <view class="bfvc" @click="confirmBtn">确认</view> -->
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				xieyi: false,
				paymode: 'wechat', // alipay  xingyunbi
				blind_box_id: null,
				boxSource: null,
				blind_box_info: {
					image: ''
				},
				count: null,
				num: null,
				open: null,
				present_blindbox_id: null,
				present_buy_num_limit: null,
				price: null,
				zid: null
			};
		},
		onLoad(options) {
			this.blind_box_id = options.blind_box_id;
			this.boxSource = options.boxSource;
			this.zid = options.zid;
			this.getOrderInfo();
		},
		onShow() {
			if (!uni.getStorageSync("user")) {
				uni.redirectTo({
					url:'/pages/my/login'
				})
			}
		},
		methods: {
			urlEncode(param) {
				return param.replace(/%20/g, '+').replace(/%3D/g, '=').replace(/\s+/g, '+');
			},
			confrimBtn() {
				if (!this.xieyi) {
					return this.$tip.tip(this.$t('请阅读并同意协议'));
				}
				let userInfo = uni.getStorageSync('user');
				uni.showLoading({
					title: this.$t('正在请求支付')+'...',
					mask: true
				});
				const params = {
						blind_box_id: this.blind_box_info.id,
						source: this.boxSource,
						uid: userInfo.id,
						zid: this.zid || '',
						paymode: this.paymode,
						// #ifdef H5
						client: 0,
						// #endif
						// #ifdef MP-WEIXIN
						client: 1,
						// #endif
						// #ifdef APP-PLUS
						client: 2
						// #endif
				}
				console.log(params , 'paramsparams')
				this.$http({
					url: `api/pay/newer_pay`,
					data: params
				}).then((res) => {
					console.log(res, 'res.data.data');
					const params = res.data.data.data;
					let qrCode = encodeURIComponent(params.qr_code);
					console.log(qrCode ,'qrCodeqrCodeqrCodeqrCodeqrCodeqrCodeqrCodeqrCode')
					let link_url = `alipays://platformapi/startapp?saId=10000007&qrcode=${qrCode}`;
					console.log('地址：',link_url)
					//跳转外部网站
					uni.navigateTo({
						url: '/pages/tabBar/h5'
					});
					setTimeout(() => {
						uni.$emit('go_h5', {
							url: link_url
						});
					}, 600);
				});
				// let userInfo = uni.getStorageSync('user')
				// this.$http({
				// 	url: 'api/pay/newer_pay',
				// 	data: {
				// 		blind_box_id : this.blind_box_info.id,
				// 		source : this.boxSource,
				// 		uid: userInfo.id,
				// 		zid : this.zid,

				// 	}
				// }).then((res) => {

				// })
			},
			changePay(pay) {
				this.paymode = pay;
			},
			getOrderInfo() {
				let data = null;
				if (this.boxSource == 8) {
					const today = new Date().getDay(); // 获取今天是一周中的第几天（0-6）
					const index = (today + 8) % 7;
					let userInfo = uni.getStorageSync('user');
					data = {
						blind_box_id: this.blind_box_id,
						source: this.boxSource,
						uid: userInfo.id,
						zid: this.zid
					};
				} else {
					data = {
						blind_box_id: this.blind_box_id,
						source: this.boxSource
						//
					};
				}
				this.$http({
					url: 'api/common/get_blind_source_box_goods',
					data: data
				}).then((res) => {
					this.blind_box_info = res.data.data.blind_box_info;
					this.count = res.data.data.source_info.count;
					this.num = res.data.data.source_info.num;
					this.open = res.data.data.source_info.open;
					this.present_blindbox_id = res.data.data.source_info.present_blindbox_id;
					this.present_buy_num_limit = res.data.data.source_info.present_buy_num_limit;
					this.price = res.data.data.source_info.price;
				});
			}
		}
	};
</script>

<style lang="scss" setup>
	page,
	.confirm {
		overflow: hidden;
		background-color: #e7eef4;
		background-image: url('https://img.alicdn.com/imgextra/i2/2215984279448/O1CN01MIALGE2JfEvlZInW2_!!2215984279448.png');
		background-size: 100% 100%;
	}
	.card-view {
		width: 690rpx;
		margin: 0 auto;
		background-color: #fff;
		margin-top: 60rpx;
		.card-view-0 {
			display: flex;
			justify-content: space-between;
			align-items: center;
			padding: 30rpx;
			.card-view-0-left {
				display: flex;
				align-items: center;
				image {
					width: 140rpx;
					height: 140rpx;
				}
			}
			.card-view-0-left-text {
				display: flex;
				flex-direction: column;
				margin-left: 20rpx;
				.text-0 {
					font-size: 28rpx;
				}
				.text-1 {
					font-size: 24rpx;
					margin-top: 10rpx;
				}
			}
			.card-view-0-right {
				font-size: 24rpx;
				text {
					font-size: 34rpx;
					color: #000000;
					font-weight: bold;
				}
			}
		}
	}
	.card-view-1 {
		padding: 30rpx;
		background: #fff;
		display: flex;
		justify-content: space-between;
		.card-view-1-left {
			font-size: 24rpx;
			font-weight: bold;
		}
		.card-view-1-right {
			font-size: 24rpx;
			font-weight: bold;
			text {
				font-size: 28rpx;
			}
		}
	}

	.payView {
		background-color: #fff;
		width: 690rpx;
		margin: 0 auto;
		margin-top: 30rpx;
		.payView-title {
			font-size: 26rpx;
			font-weight: bold;
			padding: 20rpx 30rpx;
		}
		.payView-cell {
			display: flex;
			justify-content: space-between;
			padding: 20rpx 30rpx;
			.payView-cell-left {
				text {
					font-size: 26rpx;
					margin-right: 16rpx;
				}
			}
		}
	}
	.bottom-flexd-view-vh {
		height: calc(160rpx + constant(safe-area-inset-bottom));
		height: calc(160rpx + env(safe-area-inset-bottom));
	}
	.bottom-flexd-view {
		padding-bottom: constant(safe-area-inset-bottom);
		padding-bottom: env(safe-area-inset-bottom);
		background-color: #ffffff;
		width: 750rpx;
		position: fixed;
		bottom: 0rpx;
		padding-right: 30rpx;
		.bottom-flexd-view-content {
			width: 100%;
			height: 160rpx;
			background: #ffffff;
			display: flex;
			flex-direction: column;
			align-items: flex-end;
		}
		.bfvc {
			font-size: 30rpx;
			font-weight: 400;
			color: #333333;
			line-height: 42rpx;
			padding: 9rpx 55rpx;
			border-radius: 60rpx;
			background-color: #fccf0a;
		}
		.xieyi-Item {
			margin-top: 30rpx;
			display: flex;
			align-items: center;
			font-size: 20rpx;
			color: #666;
			.xieyi-Item-1 {
				margin-left: 6rpx;
			}
		}
	}
	.payBtnView {
		padding-right: 30rpx;
		display: flex;
		margin-top: 20rpx;
		.payBtnView-0 {
			margin-right: 20rpx;
			text-align: right;
			.payBtnView-0-0 {
				font-size: 24rpx;
			}
			.payBtnView-0-1 {
				font-size: 24rpx;
				color: #cccccc;
			}
			.text-0 {
				color: red;
			}
			.text-1 {
				font-size: 36rpx;
				font-weight: bold;
			}
		}
		.payBtnView-1 {
			width: 220rpx;
			height: 80rpx;
			background-color: #000000;
			color: #ffffff;
			font-size: 26rpx;
			font-weight: 400;
			display: flex;
			justify-content: center;
			align-items: center;
		}
	}
</style>
